{% load static %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>

    <!-- 页面右上角导航栏 -->
    <div class="navbar" id="navbar">
        <div class="btn-group">
            <a href="/main/home/" class="nav-link">首页</a>
            <a href="/main/about/" class="nav-link">简介</a>
            <a href="/main/works/" class="nav-link">作品</a>
            <a href="/main/board/" class="nav-link">留言板</a>
        </div>
    </div>

    {% comment %} <div class="schedule-header">
        <h2>留言板</h2>
    </div> {% endcomment %}
    {% comment %} <div><h1 class="text-center mb-5">留言板</h1></div> {% endcomment %}
    <!-- 留言列表 -->
    <div class="messages">
        {% for message in messages %}
            <div class="message-box">
                <p class="user-id">{{ message.user_id }}</p>
                <p>{{ message.content }}</p>
                <p class="created-at">留言时间：{{ message.created_at }}</p>

                {% if request.user.is_staff %}
                    <!-- 如果是管理员，显示删除按钮 -->
                    <a href="{% url 'main:delete_message' message.id %}" class="delete-button">删除</a>
                {% endif %}
            </div>
        {% empty %}
            <p>暂时没有留言。</p>
        {% endfor %}
    </div>

    <!-- 留言表单 -->
    <div class="form-container">
        <h2>在这里留下你想对小尹说的话吧...</h2> <!-- "添加留言" 字体大小调整，并且位置在左上角 -->
        
        <form method="POST">
            {% csrf_token %}
            
            <!-- User ID 输入框及其标签 -->
            <div class="input-group">
                <label for="id_user_id" class="input-label">User ID：</label>
                {{ form.user_id }}
            </div>

            <!-- Content 输入框及其标签 -->
            <div class="input-group">
                <label for="id_content" class="input-label">Content：</label>
                {{ form.content }}
            </div>
            
            <button type="submit">提交留言</button>
        </form>
    </div>

    <!-- 引入 Bootstrap 和自定义 JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // 获取导航栏元素
        const navbar = document.getElementById('navbar');
    
        // 当前滚动位置
        let lastScrollTop = 0;
    
        // 监听滚动事件
        window.addEventListener('scroll', function() {
            let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    
            // 如果滚动超过 100px 且滚动方向是向下
            if (currentScroll > 100) {
                // 如果当前滚动位置大于之前的位置，则隐藏导航栏
                if (currentScroll > lastScrollTop) {
                    navbar.style.top = "-70px";  // 隐藏导航栏（可以调整 -70px 根据你的导航栏高度）
                } else {
                    navbar.style.top = "10px";  // 显示导航栏
                }
            } else {
                navbar.style.top = "10px";  // 页面在顶部时，显示导航栏
            }
    
            // 更新滚动位置
            lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
        });
    </script>

</body>
</html>
